<template>
    <div class="text" :class="{ textfocus: isfocus, textblur: !isfocus }">
        <input 
            type="text"
            :value="title"
            @focus="getfocus"
            @blur="blurfocus"
            @input="updateTitle">
    </div>
</template>

<script>
import store from '../../store'

export default {
    store,
    data() {
        return {
            isfocus: false,
            questionId: this.$route.query.index
        }
    },
    methods: {
        getfocus(){
            this.isfocus = true
        },
        blurfocus(){
            this.isfocus = false
            if (!this.title) {
                store.state.question[this.questionId].totalTitle = '问卷标题'
                alert('问卷标题不能为空')
            }
        },
        updateTitle(e){
            store.commit('updateTotalTitle', {
                value: e.target.value,
                id: this.questionId
            })
        }
    },
    computed: {
        title(){
            return store.state.question[this.questionId].totalTitle
        }
    }
}
</script>

<style scoped>
input{  
	border: none;
}

.text{
    width: 100%;
    min-width: 600px;
    min-height: 55px;
    padding: 5px 100px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.text > input{
    display: block;
    position: relative;
    width: 90%;
    height: 45px;
    margin: 0 auto;
    border: 1px solid transparent;
    font-size: 1.4rem;
    text-align: center;
}

.textfocus{
    background-color: #fafafa;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.textblur{
    background-color: #fff;
}

.text:hover{
    background-color: #fafafa;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.text > input:focus{
    background-color: transparent;
}

.text:hover > input{
    background-color: #fff;
}

.text:hover > input:not(:focus){
    border: 1px solid #e0e0e0;
}
</style>